<template>
  <div>
    <!-- <el-button size="small" type="primary" @click="paixu" :disabled="this.pxList.length<1" v-if='isPx'>排序</el-button>
    <span v-if='isPx' style="color:#ccc;margin-left:20px;font-size:12px">（排序操作只支持同时上传的文件名为数字格式）</span> -->
    <div class="imgbox" v-if="list.length > 0">
      <draggable element="ul" v-model="list">
        <li v-for="(item,i) in list" :key="i">
          <i class="el-icon-delete delIcon" @click="delimg(i)"></i>
          <el-image  class="avatar" :src="staticUrl + item" fit="scale-down" :style="`width:${width}px;`" :preview-src-list="[staticUrl + item]"></el-image>
          <div style="width:100%;text-align:center">{{getsameitem(item)||''}}</div>
        </li>
      </draggable>
    </div>
    <el-upload class="avatar-uploader" :action="httpurl" multiple :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb，建议750px*750px<span class="cleartp" @click="clearPic">清空图片</span></div>
    </el-upload>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 100
    },
    height: {
      type: Number,
      default: 100
    },
    isPx:{
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      httpurl: this.$http.BASEURL + '/upload/uploadFile',
      staticUrl: this.$http.staticURL,
      list:[],
      pxList:[]
    }
  },
  created(){
    this.list = []
  },
  watch:{
    value(n,o){
      if(n.length>0){
        this.list = JSON.parse(n)
      }
    },
    list(n,o){
      this.$emit('input', JSON.stringify(n))
    }
  },
  methods: {
    // paixu(){
    //   this.pxList.sort((a,b)=>a.px-b.px)
    //   let arrr = []
    //   this.pxList.forEach(item=>{
    //     arrr.push(item.url)
    //   })
    //   setTimeout(()=>{
    //     this.list = arrr
    //   },100)
    // },
    clearPic(){
      this.list = []
      this.pxList = []
      this.$emit('input', '')
    },
    delimg(i){
      this.list.splice(i,1)
      // this.pxList.splice(i,1)
    },
    handleAvatarSuccess(res, file) {
      console.log(res, 456)
      // this.imageUrl = URL.createObjectURL(file.raw)
      res.data.px = res.data.name.slice(0,-4)
      this.pxList.push(res.data)
      this.list.push(res.data.url)
    },
    getsameitem(url){
      
        if(this.pxList.length>0){
          let arr = this.pxList.filter(e=>e.url==url)
          return arr[0].name
        }else{
          return ''
        }
      
     
    },
    beforeAvatarUpload(file) {
      if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(file.name)) {
        this.$message.error('图片类型必须是,jpeg,jpg,png,中的一种')
        return false
      } else if (file.size > 512000) {
        this.$message.error('图片大小必须小于500kb！')
        return false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.cleartp{
  padding: 0 20px;
  cursor: pointer;
  color: #E6A23C;
}
.imgbox {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.avatar-uploader .el-upload {
  // border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  margin: 5px;
  display: block;
}
ul{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
li {
  list-style: none;
  position: relative;
  border: 2px solid transparent;
  .delIcon{
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    font-size: 28px;
    color: #E6A23C;
    cursor: pointer;
  }
  
}
li:hover{
  border: 2px solid rgb(243, 46, 46);
}
li:hover .delIcon{
  display:block
}
}
 
</style>
